<template>
  <el-card class="box-card">
    <!-- 添加按钮 -->
    <template #header>
      <div class="card-header">
        <el-button type="primary" :icon="Plus" @click="showTrademarkDialog">添加</el-button>
      </div>
    </template>
    <!-- 中间表格 -->
    <!-- data是用来接收渲染数据的，数据源是trademarkList，是一个数组 -->
    <el-table v-loading="loading" :data="trademarkList" border style="width: 100%">
      <!-- prop是当前行的数据渲染源 label是显示出来的名称-->
      <el-table-column type="index" align="center" label="序号" width="80" />
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column label="品牌LOGO" >
        <template v-slot="{row}">
          <img :src="row.logoUrl" alt="" style="width:100px;height:100px;">
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="{row}"><!-- $index -->
          <el-button @click="editTrademark(row)" title="修改" size="small" type="warning" :icon="Edit" />
          <el-button @click="removeTrademark(row)" title="删除" size="small" type="danger" :icon="Delete" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!-- currentPage当前所在页   pageSize每页记录条数 -->
      <el-pagination 
        v-model:currentPage="currentPage" 
        v-model:page-size="pageSize" 
        :page-sizes="[3, 6, 9, 12]" 
        :small="small" :disabled="disabled" 
        :background="background" 
        layout=" prev, pager, next, jumper,->, sizes,total" 
        :total=total
        @size-change="handleSizeChange" @current-change="handleCurrentChange" 
      />
    <!-- 弹出框效果 -->
    <el-dialog v-model="dialogFormVisible" :title="`${trademark.id ? '修改' : '添加'}品牌`">
    <el-form :model="trademark" :rules="rules" ref="ruleFormRef">
      <el-form-item prop="tmName" label="品牌名称" label-width="100px">
        <el-input v-model="trademark.tmName" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="logoUrl" label="品牌LOGO" label-width="100px">
      <el-upload class="avatar-uploader"
        :action="`${BASE_URL}/admin/product/upload`"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload" >
          <img v-if="trademark.logoUrl" :src="trademark.logoUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
           <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/png 文件，且不超过2M大小
              </div>
            </template>
      </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Trademark'
}
</script>
<script lang="ts" setup>
import {Plus,Delete,Edit} from '@element-plus/icons-vue'
import {reqGetTrademarkListData,reqSaveTrademarkInfo,reqDeleteTrademarkInfo,reqUpdateTrademarkInfo} from '@/api/product/trademark'
import {onMounted,ref,reactive} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps,FormInstance, FormRules } from 'element-plus'
import type {TrademarkListModel,TrademarkMode} from '@/api/product/model/trademarkModel'

// 定义一些数据
const BASE_URL = import.meta.env.VITE_API_URL//环境变量
// console.log(import.meta.env.VITE_API_URL)//  '/app-dev/'设置了发请求的代理，每一个请求前面都要加/app-dev/
const total = ref<number>() // 总共页码
const trademarkList = ref<TrademarkListModel>([])//渲染到页面中的品牌数据，当前数组是空数组
const initTrademark = () => ({ tmName: '', logoUrl: '' })//每次调用这个函数都能得到一个新对象{ tmName: '', logoUrl: '' }
// 弹出框 品牌上传需要用到的响应式的对象
const trademark = reactive<TrademarkMode>(initTrademark())//得到一个新对象{ tmName: '', logoUrl: '' }
// 分页器相关
const small = ref<boolean>(false)
const background = ref<boolean>(false)
const disabled = ref<boolean>(false)
const currentPage = ref<number>(1) // 当前页码  默认是1
const pageSize = ref<number>(3) // 每页显示的条数 默认是3
//loading效果的变量
const loading = ref<boolean>(true)
// 弹出框 显示 不显示 效果的变量
const dialogFormVisible = ref<boolean>(false)
//校验数据的变量
const ruleFormRef = ref<FormInstance>()// 定义一个ref值 和el-form绑定
//定义校验数据的规则
const rules = reactive<FormRules>({
  tmName: [
    { required: true, message: '请添加品牌名称', trigger: 'blur' },
    { min: 1, max: 8, message: '长度在1到8之间', trigger: 'blur' },
  ],
  logoUrl: [{ required: true,message: '请选择要上传的图片',trigger: 'change' }],
})

// 1、定义一个方法来获取数据
const getTrademarkListData = async ()=>{
  //发请求时需要传参数
  const result = await reqGetTrademarkListData(currentPage.value,pageSize.value)
  // console.log('trademark',result)
  trademarkList.value = result.records
  total.value = result.total
  loading.value = false//loading效果隐藏
}
onMounted(()=>{// 页面一挂载就发送请求
  // 发送请求
  getTrademarkListData()
})

// 2、分页器相关事件
const handleSizeChange = (val: number) => {//一页几条数据
  pageSize.value = val
  currentPage.value = 1//一改几条数据，就让当前页跳回1
  getTrademarkListData()
}
const handleCurrentChange = (val: number) => {//根据当前页码进行切换时触发的函数
  currentPage.value = val
  getTrademarkListData()
}
// 图片上传时的两个函数
// 3、图片上传成功后会执行的函数
const handleAvatarSuccess: UploadProps['onSuccess'] = (response,uploadFile) => {
  // 将图片上传成功后在服务器的地址保存一下
  trademark.logoUrl = response.data
}
// 4、图片上传前的校验函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  const imgTypes = ['image/jpeg','image/jpg','image/png']//定义变量限定格式
  if (!imgTypes.includes(rawFile.type)) {//如果rawFile.type传进来的类型，includes包含 取反 不包含
    ElMessage.error('上传图片的格式只能是jpg/png/jepg,请重新选择')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2M,请重新选择...!')
    return false
  }
  return true
}
// 5、当单击'添加品牌'按钮时，要弹出对话框 清空之前的数据  清除校验规则
const showTrademarkDialog = ()=>{
  dialogFormVisible.value = true//弹出框显示
  delete trademark.id // 单击'修改'按钮后，再单击'添加'按钮时，会遗留原来的id 清除一下id
  Object.assign(trademark, initTrademark())//表单值清空
  ruleFormRef.value?.clearValidate()// 清除校验规则
}
// 6、删除按钮
const removeTrademark = (row: TrademarkMode) => {
  //  console.log('ss',row)每一个数据对象
  ElMessageBox.confirm(`您真的要删除${row.tmName}这个品牌吗?`,'提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => { // 真正的发请求删除品牌
      await reqDeleteTrademarkInfo(row.id as number)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      // 如果删除的是最后一页的最后一条数据，则需要让当前页码减1
      // trademarkList是当前页的总数据
      currentPage.value = trademarkList.value.length > 1 ? currentPage.value : currentPage.value - 1
      // 重新发请求渲染当前页面
      getTrademarkListData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}
// 7、更新按钮 之弹框显示待更新的品牌数据 清除校验规则
const editTrademark = (row: TrademarkMode)=>{
  dialogFormVisible.value = true // 点击按钮，显示对话框
// console.log('ss',row)//每一个数据对象
// 将需要显示出来的品牌数据给trademark进行赋值，因为弹出框数据跟trademark是响应的，页面会渲染出来
Object.assign(trademark,row)// 注意 此时的row当中，是有id的
ruleFormRef.value?.clearValidate()// 清除校验规则
}
// 8、弹出框的确定按钮其实是有两种功能的 一个是添加品牌 一个是更新品牌
const submitForm = async (formEl: FormInstance | undefined) => {
  // formEl是整个跟ref绑定的form对象 是proxy代理对象
  if (!formEl) return // 如果没有值 则直接返回 不再向下执行
  await formEl.validate((valid, fields) => {
    // validate方法 对整个表单的内容进行验证
    // 调用validate函数对el-form中的所有的需要上传的数据挨个进行校验
    // 有一项数据不满足对应的校验规则valid就是false 所有都通过校验valid则为true
    // fields是不满足项的信息
    // console.log('2',valid,fields)
    if (valid) {//走到这说明通过校验
    // 判断是添加 还是更新
      if (trademark.id) {//有id就是更新
        reqUpdateTrademarkInfo(trademark)//发请求更新
      } else {// 添加品牌
        reqSaveTrademarkInfo(trademark)//发请求添加
        currentPage.value = 1//当前页码跳回第一页
      }
      ElMessage({// 要提示添加成功
        message: '操作品牌成功',
        type: 'success'
      })
    // 关闭当前对话框
    dialogFormVisible.value = false
    // 重新发请求渲染页面
    getTrademarkListData()
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>
<style scoped>
.el-input {
  width: 75%;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>